<template>
  <el-row style="padding:0 20px;">
    <el-col :span="24">
      <el-table
      :data="tableData"
      
      style="width: 100%">
      <el-table-column
        prop="name"
        label="用例名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="code"
        label="响应状态码"
        width="180">
        <template slot-scope="scope">
          <el-tag size="medium" type="success" v-if="scope.row.code===200">{{scope.row.code}}</el-tag>
          <el-tag size="medium" type="danger" v-else>{{scope.row.code}}</el-tag>

        </template>
      </el-table-column>
      <el-table-column
        prop="result"
        label="执行结果">
        <template slot-scope="scope">
          <el-popover trigger="click" placement="top">
          <pre style="max-height: 50vh;overflow: auto;max-width: 50vw;word-break: break-all;white-space:normal">{{ scope.row.result }}</pre>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">点我查看</el-tag>
          </div>
        </el-popover>
        </template>

      </el-table-column>
    </el-table>
    </el-col>
  </el-row>
</template>

<script>
import {mockResultJson,mockResultHtml} from '@/mock/constants'
export default {
  data () {
    return {
      tableData: [{
            code: 200,
            name: '用例标题1',
            result: mockResultJson
          }, {
            code: 404,
            name: '用例标题222',
            result: mockResultHtml
          }]
    }
  },
  components: {},
  computed: {},
  created () {},
  mounted () {},
  watch: {},
  methods: {

  }
}
</script>

<style scoped>

</style>
